<template>
	<div>
		<Card>
			<span>猜你喜欢</span>
		</Card>
		<ul>
			<li
				v-for='(item,index) in list'
				:key='index'
                @click='goDetail(item)'
			>
				<h3>
					<img v-lazy="item.imgUrl" alt="">
				</h3>
				<div class='goods-name'>{{item.title}}</div>
				<div class='goods-price'>
					<span>¥</span>
					<b>{{item.price}}</b>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import Card from '@/components/home/Card.vue'
export default{
	props:{
		list:Array
	},
	components:{
		Card
	},
    methods:{
        //跳转到详情页
        goDetail( item ){
            this.$router.push({
                path:'/detail',
                query:{
                    id:item.id
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	li{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 4.693333rem;
		padding:0 0.08rem;
		h3{
			img{
				width: 4.693333rem;
				height: 4.693333rem;
			}
		}
		.goods-name{
			width: 4.693333rem;
			font-size:0.373333rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.goods-price{
			width: 100%;
			text-align: left;
			span{
				font-size:0.32rem;
				color:red;
			}
			b{
				font-size:0.48rem;
				color:red;
			}
		}
		
	}
}
</style>
